import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {
  search = async () => {
    // 获取用户输入（连续接口+重命名）
    const {keyWordElement:{value:keyword}} = this
    console.log(keyword)

    this.props.updateAppState({
      isFirst: false,
      isLoading: true
    })
    // 发送网络请求
    try {
      const res = await axios.get(`/api3/search/users?q=${keyword}`)
      this.props.updateAppState({
        isLoading: false,
        users: res.data.items,
      })
    } catch (error) {
      this.props.updateAppState({
        isLoading: false,
        err: error.message,
      })
    }
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="请输入要搜索的用户名"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
